<template>
  <view class="layout">
    <!-- 顶部栏 -->
    <view class="topbar">
      <text class="menu-btn" @click="toggleSide">☰</text>
      <text class="title">{{ pageTitle }}</text>
    </view>

    <!-- 侧边栏 -->
    <SideBar :open="isSideOpen" @close="isSideOpen=false" />

    <!-- 内容区 -->
    <view class="content">
      <slot />
    </view>

    <!-- 遮罩层（打开侧栏时显示，点击可关闭） -->
    <view v-if="isSideOpen" class="mask" @click="isSideOpen=false"></view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import SideBar from '@/components/SideBar.vue'

const isSideOpen = ref(false)
const toggleSide = () => { isSideOpen.value = !isSideOpen.value }

const pageTitle = computed(() => {
  // H5 下用 document.title，App/小程序可自定义
  try {
    if (typeof document !== 'undefined' && document.title) return document.title
  } catch {}
  return '检验批原始记录系统'
})
</script>

<style scoped>
.layout { position: relative; height: 100vh; overflow: hidden; background: #f5f6f8; }
.topbar { height: 48px; display: flex; align-items: center; padding: 0 12px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); }
.menu-btn { font-size: 22px; padding: 6px 10px; }
.title { margin-left: 8px; font-weight: 600; }
.content { position: relative; height: calc(100vh - 48px); overflow: auto; }
.mask { position: fixed; inset: 0; background: rgba(0,0,0,.25); z-index: 999; }
</style>
